Novu•2mo ago

Failed to preview Step with id: `send-email`

I am trying to use a react-email template and I cannot get it to preview in the local studio as I keep getting that error. Other ways seem to work like inline html with vars.

// app/novu/workflows/trial-ending.js
import { workflow } from "@novu/framework";
import { renderTrialEmail } from "../emails/trial-ending";

export const trialEndingWorkflow = workflow(
  "trial-ending",
  async ({ step, payload }) => {
    const isLastDay = payload.daysLeft === 0;
    const daysMessage = isLastDay
      ? "ends today"
      : `ends in ${payload.daysLeft} days`;

    // Push notification if enabled
    await step.push("push", async () => ({
      subject: "Trial Ending Soon",
      body: `${payload.subscriptionName} trial ${daysMessage}`,
    }));

    // Email notification with HTML template
    await step.email("send-email", async (inputs) => ({
      subject: `Your ${payload.subscriptionName} Trial is Ending Soon`,
      body: renderTrialEmail({ ...payload, ...inputs }),
    }));
  }
);

// app/novu/workflows/trial-ending.js
import { workflow } from "@novu/framework";
import { renderTrialEmail } from "../emails/trial-ending";

export const trialEndingWorkflow = workflow(
  "trial-ending",
  async ({ step, payload }) => {
    const isLastDay = payload.daysLeft === 0;
    const daysMessage = isLastDay
      ? "ends today"
      : `ends in ${payload.daysLeft} days`;

    // Push notification if enabled
    await step.push("push", async () => ({
      subject: "Trial Ending Soon",
      body: `${payload.subscriptionName} trial ${daysMessage}`,
    }));

    // Email notification with HTML template
    await step.email("send-email", async (inputs) => ({
      subject: `Your ${payload.subscriptionName} Trial is Ending Soon`,
      body: renderTrialEmail({ ...payload, ...inputs }),
    }));
  }
);

5 Replies

SubsKeeprOP•2mo ago

// app/novu/emails/trial-ending.jsx
import * as React from "react";
import {
  Button,
  Html,
  Text,
  Container,
  Heading,
} from "@react-email/components";
import { render } from "@react-email/render";

function TrialEmail(props) {
  const {
    userFirstName,
    subscriptionName,
    trialEndDate,
    daysLeft,
    convertsToPaid,
    paidAmount,
    subscriptionUrl,
  } = props;

  return (
    <Html>
      <Container>
        <Heading>Trial Subscription Ending</Heading>
        <Text>Hello {userFirstName},</Text>

        <Text>
          Your trial for {subscriptionName} ends in {daysLeft} days (
          {trialEndDate}).
        </Text>

        {!convertsToPaid && (
          <Text>
            Your trial will end without any automatic charges. Please verify
            this matches your actual {subscriptionName} subscription settings to
            avoid any unexpected charges. To continue the service after the
            trial, you'll need to select a subscription plan.
          </Text>
        )}

        {convertsToPaid && (
          <Text>
            When your trial ends, you'll be automatically charged ${paidAmount}.
          </Text>
        )}

        <Button
          href={subscriptionUrl}
          style={{ background: "#3b82f6", color: "#fff", padding: "12px 20px" }}
        >
          Manage Subscription
        </Button>
      </Container>
    </Html>
  );
}

export function renderTrialEmail(inputs) {
  return render(<TrialEmail {...inputs} />);
}

// app/novu/emails/trial-ending.jsx
import * as React from "react";
import {
  Button,
  Html,
  Text,
  Container,
  Heading,
} from "@react-email/components";
import { render } from "@react-email/render";

function TrialEmail(props) {
  const {
    userFirstName,
    subscriptionName,
    trialEndDate,
    daysLeft,
    convertsToPaid,
    paidAmount,
    subscriptionUrl,
  } = props;

  return (
    <Html>
      <Container>
        <Heading>Trial Subscription Ending</Heading>
        <Text>Hello {userFirstName},</Text>

        <Text>
          Your trial for {subscriptionName} ends in {daysLeft} days (
          {trialEndDate}).
        </Text>

        {!convertsToPaid && (
          <Text>
            Your trial will end without any automatic charges. Please verify
            this matches your actual {subscriptionName} subscription settings to
            avoid any unexpected charges. To continue the service after the
            trial, you'll need to select a subscription plan.
          </Text>
        )}

        {convertsToPaid && (
          <Text>
            When your trial ends, you'll be automatically charged ${paidAmount}.
          </Text>
        )}

        <Button
          href={subscriptionUrl}
          style={{ background: "#3b82f6", color: "#fff", padding: "12px 20px" }}
        >
          Manage Subscription
        </Button>
      </Container>
    </Html>
  );
}

export function renderTrialEmail(inputs) {
  return render(<TrialEmail {...inputs} />);
}

Dima Grossman•2mo ago

Do you see any logs in your terminal? I'm suspecting some compulation or rendering issue

SubsKeeprOP•2mo ago

there is this, but doesn't help me. can't paste the whole thing. If you need it all, I can get it.

✗ Failed to execute workflowId: 'subscription-due' ├ σ stepId: 'send-email' ├ α action: 'preview' └ Δ duration: '135.33ms' Y [Error]: Failed to preview Step with id: send-email: {} at Ee.previewStep (webpack-internal:///(rsc)/./node_modules/@novu/framework/dist/servers/next.js:27:3237) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.eval [as email] (webpack-internal:///(rsc)/./node_modules/@novu/framework/dist/servers/next.js:24:13061) at async subscriptionDueWorkflow.name [as execute] (webpack-internal:///(rsc)/./app/novu/workflows/subscription-due.js:24:5) at async Ee.executeWorkflow (webpack-internal:///(rsc)/./node_modules/@novu/framework/dist/servers/next.js:25:373) at async preview (webpack-internal:///(rsc)/./node_modules/@novu/framework/dist/servers/next.js:27:5441) at async Oe.handleAction (webpack-internal:///(rsc)/./node_modules/@novu/framework/dist/servers/next.js:27:4996) at async eval (webpack-internal:///(rsc)/./node_modules/@novu/framework/dist/servers/next.js:27:3876) at async eval (webpack-internal:///(rsc)/./node_modules/@sentry/nextjs/build/cjs/common/wrapRouteHandlerWithSentry.js:57:36) at async F:\code\sk\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:55778 at async eO.execute (F:\code\sk\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:46527) at async eO.handle (F:\code\sk\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:57112) at async doRender (F:\code\sk\node_modules\next\dist\server\base-server.js:1352:42) at async cacheEntry.responseCache.get.routeKind (F:\code\sk\node_modules\next\dist\server\base-server.js:1574:28) at async DevServer.renderToResponseWithComponentsImpl

anyone? stuck here.

Dima Grossman•2mo ago

@SubsKeepr I've just tried to replicate this project locally and the email properlu works for me. One thing I noticed in your error message is that the workflow id called subscription-due, while in the workflow definition you shared it's called "trial-ending" could you try visiting the localstudio and removing the url path? Just visiting http://localhost:2022 as potentially you are trying to preview the workflow by it's old name

SubsKeeprOP•2mo ago

Thanks for catching that. I will check it out

Gaming

Programming

Failed to preview Step with id: `send-email`